/* 改变主题色变量 */
$--color-primary: $theme;
$--color-warning: $orange;
$--color-danger: $red;

@import './common.scss';
@import './mixin.scss';
@import '../iconfont/iconfont.css';
@import './edcMini.scss';

.app {
  width: 100%;
  max-width: 677px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;

  // TabBar标签栏 样式
  .van-tabbar {
    height: 56px;
    font-size: 10px;
    box-shadow: 0 -3.5px 5px rgba(0, 0, 0, 0.02);
  }

  .van-tabbar-item__text {
    font-size: 10px;
  }

  .van-sticky--fixed,
  .van-tabbar--fixed,
  .van-dropdown-item {
    left: 50%;
    width: 100%;
    max-width: 677px;
    transform: translateX(-50%);
  }
}

.van-popup--bottom {
  left: 50%;
  width: 100%;
  max-width: 677px;
  transform: translateX(-50%);
}

.page-wrapper {
  max-width: 677px;
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  background-color: $white;

  .header {
    padding: 12px;
    color: $remind-font-color;
    background-color: $remind-background;
    box-shadow: 0 3px 16px $shadow1;

    .link {
      display: block;
      padding: 6px 0;
      color: $theme;
    }
  }
}

// 页面 吸底button 样式
.page-bottom-btn {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  // max-width: 677px;
  height: 72px;
  height: calc(72px + constant(safe-area-inset-bottom));
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0 auto;
  background-color: $white;
  box-shadow: 0 -3.5px 5px rgba(0, 0, 0, 0.02);

  .van-button {
    width: calc(50% - 24px);
    height: 40px;
    margin-top: 16px;
    margin-left: 16px;
  }
}

.tags-0 {
  margin-left: 8px;
  font-weight: normal;
  color: #8e4b10;
  background-color: #fdf6b2;
}

.tags-1 {
  margin-left: 8px;
  font-weight: normal;
  color: #f04438;
  background-color: #ffeeed;
}

.tags-2 {
  font-weight: normal;
  color: #1e63ee;
  background-color: #dbe8ff;
  border-color: #dbe8ff;
}

.tags-3 {
  font-weight: normal;
  color: #027a48;
  background-color: #ecfdf3;
  border-color: #ecfdf3;
}

.tags-4 {
  font-weight: normal;
  color: #7136c7;
  background-color: #f2edff;
  border-color: #f2edff;
}
